<template>
  <div class="create-form">
    <!-- <pre class="">
      <code>
        {{ formItems }}
      </code>
    </pre>
    <hr v-for="(i, k) in 50" :key="k" />

    <pre class="">
      <code>
        {{ formData }}
      </code>
    </pre> -->
    <el-form :model="formData" ref="formRef">
      <el-form-item
        clearable
        v-for="(item, index) in formItems"
        :key="index"
        :label="item.title"
        :prop="item.field"
        class="form-item max-lg:last:!mb-0"
      >
        <el-input clearable v-if="item.type === 'text'" v-model="formData[item.field]" :placeholder="item.placeholder"></el-input>
        <el-input v-if="item.type === 'password'" v-model="formData[item.field]" :placeholder="item.placeholder" show-password></el-input>
        <el-input
          clearable
          v-else-if="item.type === 'number'"
          v-model="formData[item.field]"
          :placeholder="item.placeholder"
          @input="handleNumberInput($event, item.field)"
        ></el-input>

        <!--       @change="handleSelectChange($event, item.field)" -->
        <el-select v-else-if="item.type === 'select'" v-model="formData[item.field]" :placeholder="item.placeholder">
          <el-option v-for="(opt, idx) in parseOptions(item.options)" :key="idx" :label="opt.label" :value="opt.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    watch: {
      formData: {
        immediate: true,
        handler(newVal) {
          //
          this.$emit('update:value', newVal)
        },
        deep: true
      }
    },
    props: {
      value: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        formItems: this.value,
        formData: {}
      }
    },
    methods: {
      handleSelectChange(value, field) {
        // 找到当前选中的选项
        const options = this.parseOptions(this.formItems.find(item => item.field === field).options)
        const selectedOption = options.find(opt => opt.value === value)

        // 发送包含 label 和 value 的对象
        this.$emit('select-change', {
          field,
          label: selectedOption.label,
          value: selectedOption.value
        })
      },
      handleNumberInput(value, field) {
        // 移除非数字字符
        const numValue = value.replace(/[^\d]/g, '')
        this.$set(this.formData, field, numValue)
      },

      parseOptions(optionsStr) {
        if (!optionsStr) return []
        return optionsStr.split('|').map(opt => {
          const [label, value] = opt.split(':')
          return { label, value }
        })
      },
      getFormData() {
        return this.formData
      },
      resetForm() {
        this.formData = {}
        this.$refs.formRef.resetFields()
      }
    },
    created() {
      // this.formItems = [
      //   {
      //     type: 'text',
      //     title: '用户名',
      //     field: 'username',
      //     placeholder: '请输入用户名'
      //   },
      //   {
      //     type: 'password',
      //     title: '密码',
      //     field: 'password',
      //     placeholder: '请输入密码'
      //   },
      //   {
      //     type: 'number',
      //     title: '年龄',
      //     field: 'age',
      //     placeholder: '请输入年龄'
      //   },
      //   {
      //     type: 'select',
      //     title: '性别',
      //     field: 'gender',
      //     placeholder: '请选择性别',
      //     options: 'male:男|female:女'
      //   }
      // ]
      // 初始化表单数据
      this.formItems.forEach(item => {
        if (item.type === 'number') {
          this.$set(this.formData, item.field, '')
        } else if (item.type === 'select' && item.options) {
          const firstOption = this.parseOptions(item.options)
          this.$set(this.formData, item.field, firstOption ? firstOption.value : '')
        } else {
          this.$set(this.formData, item.field, '')
        }
      })
    }
  }
</script>
<style lang="less" scoped>
  .create-form {
    :deep(.el-input__inner) {
      text-align: left !important;
      // background-color: #fff !important;
      @apply lg:!bg-white max-lg:!bg-[#FAF9F9];
      &:focus {
        @apply lg:!bg-white max-lg:!bg-[#FAF9F9];
      }
    }

    // padding: 20px;
    .form-item {
      // margin-bottom: 10px !important;
      :deep(.el-form-item__label) {
        float: none;
        display: block;
        text-align: left;
        padding: 0 0 8px;
        line-height: 20px;
        font-size: 14px;
      }
      :deep(.el-form-item__content) {
        margin-left: 0 !important;
        .el-select,
        .el-input-number {
          width: 100%;
          :deep(.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled)),
          :deep(.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled)) {
            border-color: transparent;
          }
        }
      }
    }
  }
</style>
